<template>
	<view class="wanlshop-container">
		<!-- 导航条 -->
		<view class="cu-custom bg-white" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar" :style="{ height: $wanlshop.wanlsys().height + 'px'}">
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold line-green"></text>
					<input type="text" maxlength="12" confirm-type="search" placeholder-style="color: #ccc" placeholder="搜医院、医生、科室、疾病和症状" focus />
				</view>
			</view>
		</view>
		
		<view class="content">
			<scroll-view scroll-y="true" class="left" :style="{
				height: ($wanlshop.wanlsys().screenHeight - $wanlshop.wanlsys().height * 2) + 'px',
			}">
				<view v-for="(item,index) in dataList" :key="index" :class="{cur:cur == index}" @tap="$wanlshop.to(`/pages/medicalcare/bookingsystem/department?key=${item.name}&id=${item.id}&tabCurrentIndex=1`)">
					<image :src="$wanlshop.oss(item.image)" mode="heightFix"></image>
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
			<!-- <scroll-view scroll-y="true" class="right" :style="{
				height: ($wanlshop.wanlsys().screenHeight - $wanlshop.wanlsys().height * 2) + 'px',
			}">
				<view>妇产科</view>
				<view>产科</view>
				<view>妇科</view>
			</scroll-view> -->
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cur: 0,
				dataList:[]
			};
		},
		computed: {
			
		},
		
		onLoad(options) {
			this.loadData(options)
			if(options.title) {
				uni.setNavigationBarTitle({
					title:options.title
				})
			}
		},
		methods: {
			async loadData(data) {
				await uni.request({
					url: '/addons/internethospital/api.hospital/section',
					method: 'POST',
					data: {
						hospital_id:data.id
					},
					success: res => {
						this.dataList = res.data
					}
				});
			},
		}
	};
</script>


<style lang="less">
	page {
		background-color: #f4f4f4;
	}

.cu-custom .search-form{
	border: 3rpx solid #4CBD66;
	background-color: #fff;
}
.content {
	display: flex;
	justify-content: flex-start;
	.left {
		// width: 380rpx;
		background-color: #ffffff;
	}
	.right {
		width: 370rpx;
		background-color: #ffffff;
	}
	.left,.right {
		view {
			padding: 22rpx 0;
			margin: 0 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			&.cur {
				text {
					color: #4CBD66;
				}
			}
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
			text {
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
			}
		}
	}
	.right {
		view {
			padding: 22rpx 0;
			margin: 0 30rpx;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			border-bottom: 1rpx solid rgba(182,182,182,0.5);
		}
	}
}
</style>

